<template>
  <div>
    <a-row class="home" :gutter="24">
      <a-col :span="8" style="margin-top: 20px">
        <a-card title="个人信息" style="width: auto">
          <a-upload
              name="file"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :customRequest="selfUpload"
              :before-upload="beforeUpload"
          >
            <img v-if="userVo.avatar" :src="userVo.avatar" alt="avatar" class="avatar-size"/>
          </a-upload>
        </a-card>
        <a-card title="修改个人信息" style="margin-top: 20px">
          <template>
            <a-form-model ref="ruleForm" :model="ruleForm" v-bind="layout">
              <a-form-model-item has-feedback label="用户昵称" prop="pass">
                <a-input v-model="ruleForm.nickName" type="text" autocomplete="off"/>
              </a-form-model-item>
              <a-form-model-item has-feedback label="性别" prop="pass">
                <a-select v-model="ruleForm.sex"
                          default-value="请选择" style="width: 70px">
                  <a-select-option value="0">
                    女
                  </a-select-option>
                  <a-select-option value="1">
                    男
                  </a-select-option>
                  <a-select-option value="2">
                    未知
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item has-feedback label="用户密码" prop="pass">
                <a-input v-model="ruleForm.password" type="text" autocomplete="off"/>
              </a-form-model-item>
              <a-form-model-item has-feedback label="手机号码" prop="age">
                <a-input v-model="ruleForm.phone"/>
              </a-form-model-item>
              <a-form-model-item has-feedback label="用户邮箱" prop="age">
                <a-input v-model="ruleForm.email"/>
              </a-form-model-item>
              <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="submitForm">
                  修改
                </a-button>
                <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
                  重置
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </template>
        </a-card>
      </a-col>
      <a-col :span="16" style="margin-top: 20px">
        <a-card>
          <a-tabs default-active-key="2">
            <a-tab-pane key="1">
              <span slot="tab">
                <a-icon style="color: red" type="heart"/>收藏
              </span>

              <div>
                <a-card hoverable style="width: 300px;display: inline-grid;margin:0 50px 20px 0" v-for="(item,index) in BookData" :key="index">
                  <template slot="actions" class="ant-card-actions">
                    <a-icon @click="pickOk(item.id)"  key="heart" type="heart"/>{{num}}
                    <a-tag style="background-color: #97ffc8">{{item.cateName}}</a-tag>
                  </template>
                  <a-card-meta :title="item.name" :description="item.description">
                    <a-avatar
                        style="width: 100px;height: 100px"
                        slot="avatar"
                        :src="item.cover"
                    />
                  </a-card-meta>
                </a-card>
              </div>


            </a-tab-pane>
            <a-tab-pane key="2">
              <span slot="tab">
                <a-icon style="color: #1890ff" type="environment"/>分享
              </span>

              <!--表格区域-->
              <a-table :columns="userColumns" :data-source="data" bordered :pagination="pagination">
                <span slot="cover" @click="getId(record.id)" slot-scope="text,record">
              <a-upload
                  name="avatar"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  :before-upload="beforeUploadq"
                  :customRequest="selfUploadq"
              >
                <img v-if="record.cover" :src="record.cover" alt="cover" class="avatar-size"/>
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'"/>
                  <div class="ant-upload-text">
                    Upload
                  </div>
                </div>
              </a-upload>
            </span>
                <span slot="createTime" slot-scope="createTime">
                    {{ createTime }}
                  </span>
                            <span slot="action" slot-scope="text, record">
                  <a-divider type="vertical"/>
                  <a @click="deleteById(record.id)">删除</a>
                  <a-divider type="vertical"/>
                  <a-dropdown :trigger="['click']">
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                      更多<a-icon type="down"/>
                    </a>
                    <a-menu slot="overlay">
                      <a-menu-item key="0" sl>
                        <a @click="updateRoleInfo(record)">修改信息</a>
                      </a-menu-item>
                      <a-menu-divider/>
                    </a-menu>
                  </a-dropdown>
                </span>
              </a-table>

            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {getUserById, upload} from "../../../services/usercenter";
import {updateUserInfo} from "../../../services/user";
import {getAllLike, getMyBooks, uploadCover} from "../../../services/books";

const userColumns = [
  {
    title: '资源名',
    dataIndex: 'name',
    key: 'name',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '资源封面',
    dataIndex: 'cover',
    key: 'cover',
    scopedSlots: {customRender: 'cover'},
  },
  {
    title: '归属',
    dataIndex: 'cateName',
    key: 'cateName',
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  }
]
const data = []
export default {
  name: "UserCenter",
  data() {
    return {
      data,
      userColumns,
      userVo: {
        avatar: '',
        nickName: ''
      },
      BookData:[],
      loading: false,
      ruleForm: {
        id: '',
        nickName: '',
        sex: '',
        password: '',
        phone: '',
        email: ''
      }
    }
  },
  created() {
    this.getUser()
    this.getMyAllBooks()
    this.getAllMyLike()
  },
  methods: {
    getUser() {
      const id = localStorage.getItem('id');
      this.ruleForm.id = id
      getUserById(id).then(result => {
        this.userVo.avatar = result.data.data.avatar
        this.ruleForm.nickName = result.data.data.nickName
        this.ruleForm.sex = result.data.data.sex
        this.ruleForm.phone = result.data.data.phone
        this.ruleForm.email = result.data.data.email
      })
    },
    selfUpload(data) {
      const formData = new FormData()
      formData.append('file', data.file)
      upload(formData).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.msg, 3)
          location.reload()
        } else {
          this.$message.error(res.data.msg, 3)
        }
      })

    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('你需要上传的文件格式为（jpeg/png）!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('图片不得大于2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
    submitForm() {
      updateUserInfo(this.ruleForm.id, this.ruleForm.nickName, this.ruleForm.sex, this.ruleForm.password, this.ruleForm.phone, this.ruleForm.email).then(result => {
        if (result.data.code === 0) {
          setTimeout(() => {
            this.updateState = false;
            this.confirmLoading = false;
            this.getUser()
          }, 2000);
          this.$message.success(result.data.msg, 3)
          location.reload()
        } else {
          this.$message.error(result.data.msg, 3)
        }
      })
    },
    beforeUploadq(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('你需要上传的文件格式为（jpeg/png）!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('图片不得大于2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
    getId(id) {
      this.bookId = id
    },
    selfUploadq(data) {
      const formData = new FormData()
      formData.append('file', data.file)
      uploadCover(this.bookId, formData).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.msg, 3)
          location.reload()
        } else {
          this.$message.error(res.data.msg, 3)
        }
      })
    },
    getMyAllBooks(){
      getMyBooks().then(result=>{
        this.data = result.data.data.books
      })
    },
    getAllMyLike(){
      getAllLike().then(result=>{
        this.BookData = result.data.data
      })
    }
  }
}
</script>

<style scoped>
.avatar-size {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

</style>
